<template>
	<view>
		<scroll-view scroll-y="true" :style="{height:height+'px'}" @scrolltolower="lower" lower-threshold="100">
			<view class="topList">
				<view class="item" v-for="(item,index) in topList" :class="{select:item.select}" @click="select(index,item)">
					<image :src="item.goodsTypeImg" mode=""></image>
					<view class="title">{{item.goodsTypeName}}</view>
				</view>
			</view>
			<view class="banner">
				<u-swiper :list="bannerList" mode="dot" height="221"></u-swiper>
			</view>
			<!-- <view class="smList">
			<view class="title">
				爆款抢购
			</view>
			<view class="list">
				<view class="item" v-for="(item,index) in hotList" :key="item+index">
					<image :src="item.imgurl" mode=""></image>
					<view class="name">{{item.name}}</view>
					<view class="price">{{item.price}}</view>
				</view>
			</view>
		</view> -->

			<view class="moreHot">
				<view class="line"></view>
				<view class="title">更多爆款</view>
				<view class="line"></view>
			</view>
			<view class="goodsBox">
				<!-- 瀑布流 -->
				<u-waterfall v-model="flowList" ref="uWaterfall">
					<template v-slot:left="{leftList}">
						<view class="box" style="margin-right: 10upx;">
							<view class="items" @click="toPage(0,'/pages/goodsDetail/index?goodsId='+item.goodsId+'&goodsType='+item.goodsType)"
							 v-for="(item, index) in leftList" :key="index+item">
								<image :src="item.coverImgList[0]" mode="widthFix"></image>
								<view class="content">
									<view class="title">
										<view>{{item.goodsName}}</view>
									</view>
									<view class="bottom">
										<view class="left">￥<text class="price">{{item.unitPrice}}</text></view>
										<view class="right">销量:{{item.sales}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="box" style="margin-left: 10upx;">
							<view class="items" @click="toPage(0,'/pages/goodsDetail/index?goodsId='+item.goodsId+'&goodsType='+item.goodsType)"
							 v-for="(item, index) in rightList" :key="index+item">
								<image :src="item.coverImgList[0]" mode="widthFix"></image>
								<view class="content">
									<view class="title">
										<view>{{item.title}}</view>
									</view>
									<view class="bottom">
										<view class="left">￥<text class="price">{{item.unitPrice}}</text></view>
										<view class="right">销量:{{item.sales}}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
			</view>
			<u-loadmore :status="status2" bg-color="rgba(255,255,255,0)" margin-top='15' margin-bottom='15' @loadmore='laodmore2'
			 :loadText="loadText2" />
		</scroll-view>
	</view>
</template>

<script>
	import * as goods from '../../../api/goods/index'
	export default {
		props: ["height"],
		data() {
			return {
				goodsTypeId:'',
				pageSize: 20,
				pageNum: 1,
				status2: 'loading',
				loadText2: {
					loadmore: '获取数据错误,点击重新加载',
					loading: '加载中',
					nomore: '已经到底啦'
				},
				offsetTop: '',
				borderStyle: 'border',
				popupShow: true,
				flowList: [],
				leftList: [],
				rightList: [],
				goodList: [],
				bannerList: [{
						image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					}
				],
				topList: [],
				hotList: [{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					},
					{
						imgurl: '',
						name: '床上四件套',
						price: '￥125.2'
					}
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			}
		},

		// created() {
		// 	this.getGoodsList()
		// },
		methods: {
			select(index,item) {
				for (var i = 0; i < this.topList.length; i++) {
					this.$set(this.topList[i], 'select', false);
				}
				this.$set(item, 'select', true);
				this.goodsTypeId = item.goodsTypeId
				this.pageNum = 1
				this.status  = 'loading'
				this.$refs.uWaterfall.clear()
				this.getGoodsList()
			},
			lower() {
				if (this.status2 == 'nomore') {
					uni.showToast({
						title: '已经到底啦',
						icon: 'none'
					})
				}
				this.getGoodsList()
			},
			laodmore2() {
				console.log(123)
			},
			int(value) {
				for (var i = 0; i < value.length; i++) {
					if (i == 0) {
						value[i].select = true
					} else {
						value[i].select = false
					}
				}
				if(value.length>0){
					this.goodsTypeId = value[0].goodsTypeId
				}
				this.topList = value
				this.pageNum = 1
				this.status2  = 'loading'
				this.$refs.uWaterfall.clear()
				var that = this
				setTimeout(function(){
					that.getGoodsList()
				},500)
			},
			addRandomData(list) {
				for (let i = 0; i < list.length; i++) {
					let index = this.$u.random(0, list.length - 1);
					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
					let item = JSON.parse(JSON.stringify(list[index]))
					item.id = this.$u.guid();
					this.flowList.push(item);
				}
			},

			getGoodsList() {
				goods.goodsList({
					orderType: 1,
					goodsTypeId:this.goodsTypeId,
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(res => {
					if (res.data.obj.length < this.pageSize) {
						this.status2 = 'nomore'
					}
					this.pageNum++
					var that = this
					setTimeout(function() {
						that.addRandomData(res.data.obj)
					}, 100)
				}).catch(err => {
					this.status2 = 'loadmore'
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './index.scss';
</style>
